<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/节点操作.css">
</head>

<body>
    <script>
        window.onload = function(){
            //创建orderHtml节点
            var orderHtml = document.createElement("div");
            orderHtml.classList.add("orderHtml")
            document.body.appendChild(orderHtml);
            //写入底部标签
            orderHtml.innerHTML =
                `<div class="textMsg">鼠标放在框内，滚动鼠标可以向下滑动</div>
                <div class="allSelect">
                    <div>
                        <input class="allSelectInput" type="checkbox">
                        全选
                    </div>
                    <div class="deleteAll">删除所有</div>
                </div>`;
            var box = document.createElement("div");
            box.classList.add("box");
            orderHtml.appendChild(box);
            //创建底部总价标签
            var allPrice = document.createElement("div");
            allPrice.classList.add("allPrice");
            allPrice.textContent = "总价:0";
            orderHtml.appendChild(allPrice);
            var i = 0;
            var all = 0;
            //写入6条数据
            while (i++ < 6) {
                var item = document.createElement("div");
                item.classList.add("item");
                item.innerHTML =
                    `
                <div>
                    <input class="itemCheckBox" type="checkbox"/>
                    <div class="text">西瓜</div>
                    <div class="introduction">
                        <span class="price">单价:${10 * i}</span>
                        <div>
                            数量:
                            <div class="reset reduce">-</div>
                            <div class="value">${i * 10}</div>
                            <div class="reset add">+</div>
                        </div>
                    </div>
                </div>
                <div class="delete">删除</div>
                `;
                // all += (10 * i) * (i * 10);//计算总价
                box.appendChild(item);
                var resets = item.querySelectorAll(".reset");
                resets.forEach((value, index, array) => {
                    if (index === 0) {
                        value.onclick = function () {
                            var text = this.nextElementSibling.textContent
                            text = parseInt(text) - 1;
                            if (parseInt(text) == 0) {
                                var cat = confirm("是否移除该项商品?");
                                if (cat) {
                                    this.parentElement.parentElement.parentElement.parentElement.remove();
                                    updateDeleteAll();
                                }
                                else return;
                            } else {
                                this.nextElementSibling.textContent = text;
                            }
                            resetAllPrice();
                        }
                    } else {
                        value.onclick = function () {
                            var text = this.previousElementSibling.textContent
                            text = parseInt(text) + 1;
                            this.previousElementSibling.textContent = text;
                            resetAllPrice();
                        }
                    }
                })
            }
            // allPrice.textContent = "总价:" + all + "元";//写入总价
            //获取列表内的删除节点
            var deleteBtns = document.getElementsByClassName("delete");
            for (var j = 0; j < deleteBtns.length; j++) {
                //给删除按钮设定点击事件
                deleteBtns[j].onclick = function () {
                    this.parentNode.remove();
                    updateDeleteAll();//更新"删除所有"标签的状态
                    resetAllPrice();//更新总价的值
                    msg();//显示删除信息
                    if(document.getElementsByClassName("itemCheckBox").length===0)orderHtml.remove();
                    var allSelectInput = document.getElementsByClassName("allSelectInput")[0];
                    var itemCheckBoxs = document.getElementsByClassName("itemCheckBox");
                    var check = 0;
                    for (var i = 0; i < itemCheckBoxs.length; i++) {
                        if(itemCheckBoxs[i].checked) check++;
                    }
                    if(check == itemCheckBoxs.length) allSelectInput.checked=true;
                }
            }
            //初始化
            (function (){
                itemCheckBoxsInit();//所有列表checkbox绑定事件
                resetAllPrice();//重新计算总价
                allSelect();//全选框绑定事件
                deleteAllInit();//删除所有绑定事件
            })();
            //重新计算总价
            function resetAllPrice() {
                var items = document.getElementsByClassName("item");
                var all = 0;
                for (let index = 0; index < items.length; index++) {
                    var itemCheckBox = items[index].querySelector(".itemCheckBox");
                    if (!itemCheckBox.checked) continue;
                    var price = parseInt(items[index].querySelector(".price").textContent.split(":")[1]);
                    var num = parseInt(items[index].querySelector(".value").textContent);
                    all = all + price * num;
                }
                allPrice.textContent = "总价:" + all + "元";
            }
            //删除成功消息提示
            function msg(text) {
                if(!text) var text = "删除成功";
                var msg = document.createElement("div");
                msg.classList.add("msg");
                msg.textContent = text;
                box.appendChild(msg);
                setTimeout(function () {
                    msg.remove();
                }, 1000);
            }
            //初始化列表全部checkbox的事件
            function itemCheckBoxsInit() {
                var itemCheckBoxs = document.getElementsByClassName("itemCheckBox");
                for (var i = 0; i < itemCheckBoxs.length; i++) {
                    itemCheckBoxs[i].onchange = function () {
                        updateDeleteAll();
                        resetAllPrice();
                        //处理全选框的状态
                        var itemCheckBoxs = document.getElementsByClassName("itemCheckBox");
                        var allSelectInput = document.getElementsByClassName("allSelectInput")[0];
                        if(!this.checked){
                            allSelectInput.checked = false;
                            return;
                        }
                        for(var i = 0;i<itemCheckBoxs.length;i++){
                            if(!itemCheckBoxs[i].checked){
                                allSelectInput.checked = false;
                                return;
                            }
                        }
                        allSelectInput.checked = true;
                    }
                }
                updateDeleteAll();
            }
            //更新"删除所有"标签的显示状态
            function updateDeleteAll() {
                var itemCheckBoxs = document.getElementsByClassName("itemCheckBox");
                var check = false;
                for (var i = 0; i < itemCheckBoxs.length; i++) {
                    if (itemCheckBoxs[i].checked) {
                        check = true;
                        break;
                    }
                }
                document.getElementsByClassName("deleteAll")[0].style.visibility = check ? "visible" : "hidden";
            }
            //全选框事件初始化
            function allSelect() {
                //获取全选checkbox
                var allSelectInput = document.getElementsByClassName("allSelectInput")[0];
                allSelectInput.onchange = function () {
                    //获取所有列表内的checkbox
                    var itemCheckBoxs = document.getElementsByClassName("itemCheckBox");
                    //遍历
                    for (var i = 0; i < itemCheckBoxs.length; i++) {
                        //设置每个checkbox的状态
                        itemCheckBoxs[i].checked = allSelectInput.checked;
                    }
                    //处理"删除所有"标签的显示状态
                    if (!allSelectInput.checked) {
                        document.getElementsByClassName("deleteAll")[0].style.visibility = "hidden";
                    } else {
                        document.getElementsByClassName("deleteAll")[0].style.visibility = "visible";
                    }
                    resetAllPrice();//重新计算总价
                }
            }
            //删除所有点击事件初始化
            function deleteAllInit() {
                document.getElementsByClassName("deleteAll")[0].onclick = function () {
                    //获取所有列表的checkbox标签
                    var itemCheckBoxs = document.getElementsByClassName("itemCheckBox");
                    //遍历进行删除
                    for (var i = 0; i < itemCheckBoxs.length; i++) {
                        //如果当前节点是选中的，进行删除
                        if (itemCheckBoxs[i].checked) {
                            //获取这个checkbox的item，调remove()进行删除
                            itemCheckBoxs[i].parentElement.parentElement.remove();
                            //因为itemCheckBoxs类似数组，属于引用数据类型，删除后整个数组长度会发生变化，需要进行i--回退一次
                            i--;
                        }
                    }
                    if(itemCheckBoxs.length==0)orderHtml.remove();
                    //设置"删除所有"标签的显示状态
                    document.getElementsByClassName("deleteAll")[0].style.visibility = "hidden";
                    resetAllPrice();//重新计算总价
                }
            }
        }
    </script>
</body>

</html>